<template>
  <div
    class="login-box flex-wrap"
    :class="{ 'login-box-pop': +loginMethodsType === 1 }"
  >
    <img
      v-if="+loginMethodsType === 1"
      class="login-dialog-left"
      src="//image.zlketang.com/public/news/zl_new_official/pc_login_bg.png"
    />
    <div class="login-nav rel">
      <el-tabs
        stretch
        v-if="+loginMethodsType === 2"
        v-model="loginType"
        @tab-click="handleTypeChange"
      >
        <el-tab-pane
          v-for="(item, index) in loginTypeMap"
          :key="index"
          :label="item.title"
          :name="item.value"
        ></el-tab-pane>
      </el-tabs>
      <div class="login-title-box" v-else-if="+loginMethodsType === 1">
        <div>{{ loginTypeTitle }}</div>
        <i @click="closeLoginDialog" class="el-icon-close login-close-icon"></i>
      </div>
      <div
        v-if="+loginType === 1"
        class="login-content-box flex-column-wrap flex-center-wrap"
      >
        <div class="ewm-img-box">
          <div class="exm-img flex-center">
            <img
              src="//image.zlketang.com/public/news/images/gw-img-v2/loading.gif"
              v-if="isEwmLoading"
            />
            <img
              v-else
              class="exm-img"
              :src="parseResourceUrl(ewmImg)"
              alt=""
            />
          </div>

          <div
            v-if="isShowEwmOverlay"
            class="ewm-overlay flex-wrap flex-center flex-column-wrap"
          >
            <template v-if="isShowSmSuccessTitle">
              <zl-icon
                icon="icon-saomiaochenggong"
                :iconStyle="{ width: '50px', height: '50px' }"
              ></zl-icon>
              <div style="margin-top: 10px">扫码成功</div>
            </template>
            <div
              @click="handleTypeChange()"
              v-if="isShowUplodaTitle"
              class="flex-center flex-column-wrap"
            >
              <zl-icon
                icon="icon-shuaxin"
                :iconStyle="{ width: '50px', height: '50px' }"
              ></zl-icon>
              <div style="margin-top: 10px">点击刷新</div>
            </div>
          </div>
        </div>
        <span class="login-tips">微信扫码登录</span>
        <div
          class="agree-box"
          :class="{ 'agree-box-pop': +loginMethodsType === 1 }"
        >
          扫码即同意
          <a target="_blank" :href="parseFullPath('/ac/user_agree')">
            《之了课堂用户协议》
          </a>
          <a target="_blank" :href="parseFullPath('/ac/privacy_agree')">
            《隐私协议》
          </a>
        </div>
      </div>
      <div v-if="+loginType === 2" class="login-content-box">
        <el-input
          maxlength="11"
          v-model="phone"
          placeholder="请输入手机号"
        ></el-input>
        <el-input v-model="picCode" placeholder="请输入正确答案">
          <img
            @click="getPicCode"
            class="pic-img"
            slot="append"
            :src="'data:image/png;base64,' + picCodeImg"
            alt=""
          />
        </el-input>
        <el-input v-model="vcode" placeholder="请输入验证码">
          <div
            @click="postPhoneCode"
            class="sm-append"
            :class="{ 'sm-append-def': codeMsg === '获取验证码' }"
            slot="append"
            alt=""
          >
            {{ codeMsg }}
          </div>
        </el-input>
        <div
          class="login-btn"
          :class="{ 'login-btn-disable': phoneLoginDisabled ? true : false }"
          @click="submitPhone"
        >
          登录/注册
        </div>
        <div
          class="agree-box"
          :class="{ 'agree-box-pop': +loginMethodsType === 1 }"
        >
          <el-radio v-model="agreeCheck" :label="true">
            未注册手机验证后自动登录，注册即代表同意
            <a target="_blank" :href="parseFullPath('/ac/user_agree')">
              《之了课堂用户协议》
            </a>
            <a target="_blank" :href="parseFullPath('/ac/privacy_agree')">
              《隐私协议》
            </a>
          </el-radio>
        </div>
      </div>
      <div
        v-if="+loginType === 3"
        class="login-content-box-app flex-column-wrap flex-center-wrap"
      >
        <div class="ewm-img-box">
          <div class="exm-img-app flex-center">
            <img
              src="//image.zlketang.com/public/news/images/gw-img-v2/loading.gif"
              v-if="isEwmLoading"
            />
            <img
              class="exm-img-app"
              v-else
              :src="parseResourceUrl(ewmImg)"
              alt=""
            />
          </div>

          <div
            v-if="isShowEwmOverlay"
            class="ewm-overlay flex-wrap flex-center flex-column-wrap"
          >
            <template v-if="isShowSmSuccessTitle">
              <zl-icon
                icon="icon-saomiaochenggong"
                :iconStyle="{ width: '50px', height: '50px' }"
              ></zl-icon>
              <div style="margin-top: 10px">扫码成功</div>
            </template>
            <div
              @click="handleTypeChange"
              v-if="isShowUplodaTitle"
              class="flex-center-wrap flex-column-wrap"
            >
              <zl-icon
                icon="icon-shuaxin"
                :iconStyle="{ width: '50px', height: '50px' }"
              ></zl-icon>
              <div style="margin-top: 10px">点击刷新</div>
            </div>
          </div>
        </div>
        <div
          class="login-tips flex-center flex-column-wrap"
          v-if="+loginMethodsType === 2"
        >
          <div>打开之了课堂APP在"我的"</div>
          <div>页面扫一扫</div>
        </div>
        <div v-else class="login-tips flex-center flex-column-wrap">
          <div>打开之了课堂APP在"我的"</div>
          <div>页面扫一扫</div>
        </div>
        <div
          class="agree-box"
          :class="{ 'agree-box-pop': +loginMethodsType === 1 }"
        >
          扫码即同意
          <a target="_blank" :href="parseFullPath('/ac/user_agree')">
            《之了课堂用户协议》
          </a>
          <a target="_blank" :href="parseFullPath('/ac/privacy_agree')">
            《隐私协议》
          </a>
        </div>
      </div>
      <div v-if="+loginMethodsType === 1" class="login-dialog-bottom">
        <div class="flex-center-wrap flex-justify-between mb12">
          <div class="login-dialog-line"></div>
          <div class="login-dialog-other">其他登录方式</div>
          <div class="login-dialog-line"></div>
        </div>
        <div class="flex-wrap flex-justify-between" style="padding: 0 70px;">
          <template v-for="(item, index) in loginTypeMap">
            <div
              class="flex-wrap flex-center login-dialog-item"
              :key="index"
              :label="item.title"
              :name="item.value"
              v-if="item.value !== loginType"
              @click="
                loginTypeTitle = item.title
                loginType = item.value
                handleTypeChange()
              "
            >
              <img :src="item.img" alt="" />
              <div>{{ item.title }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import entryStore from '@/store/entry_store'
import {
  getWxEwm,
  getWxEwmStatus,
  getUserInfo,
  getAppEwm,
  getAppEwmStatus,
  getPicCode,
  postPhoneCode,
  submitPhone
} from '@/api/login'
import zlIcon from '@/components/zlIcon.vue'
export default {
  name: 'userLogin',
  components: {
    'zl-icon': zlIcon
  },
  props: {
    // 登录类型，1:登陆弹窗类型，2：登录页类型
    loginMethodsType: {
      type: [Number, String],
      default: 1
    },
    // 微信登陆时 小程序在登陆成功时是否需要显示固定的页面
    path: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loginType: '1',
      loginTypeTitle: '微信登录',
      loginTypeMap: [
        {
          title: '微信登录',
          value: '1',
          img:
            '//image.zlketang.com/public/news/login-optimize/login-wx-icon.png'
        },
        {
          title: '手机号登录',
          value: '2',
          img:
            '//image.zlketang.com/public/news/login-optimize/login-phone-icon.png'
        },
        {
          title: 'APP登录',
          value: '3',
          img:
            '//image.zlketang.com/public/news/login-optimize/login-app-icon.png'
        }
      ],
      // 手机号
      phone: '',
      // 图形验证码
      picCode: '',
      // 图形验证码图片
      picCodeImg: '',
      // 图形验证码token
      auth_token: '',
      // 控制图形验证码请求
      getPicCodeFlag: false,
      // 手机验证码
      vcode: '',
      // 获取验证码按钮文案
      codeMsg: '获取验证码',
      codeCount: 60,
      smCodeTimer: null,
      // 勾选协议
      agreeCheck: false,
      // 二维码图片
      ewmImg: '',
      // 二维码token
      ewmToken: '',
      // 轮询定时器
      pollTimer: '',
      // 显示二维码蒙层
      isShowEwmOverlay: false,
      // 是否显示刷新二维码文案
      isShowUplodaTitle: false,
      // 删除扫码成功title
      isShowSmSuccessTitle: false,
      isEwmLoading: false,
      // 加密公钥
      PUBLIC_KEY:
        '\x4d\x49\x49\x42\x49\x6a\x41\x4e\x42\x67\x6b\x71\x68\x6b\x69\x47\x39\x77\x30\x42\x41\x51\x45\x46\x41\x41\x4f\x43\x41\x51\x38\x41\x4d\x49\x49\x42\x43\x67\x4b\x43\x41\x51\x45\x41\x75\x66\x51\x4b\x69\x53\x35\x57\x46\x64\x6d\x4c\x33\x6f\x39\x2f\x48\x55\x52\x78\x36\x6f\x62\x36\x6d\x75\x78\x73\x39\x47\x65\x4f\x65\x2f\x48\x34\x78\x36\x51\x76\x49\x79\x4b\x37\x6c\x72\x73\x71\x42\x43\x38\x6d\x4c\x44\x51\x55\x72\x49\x33\x45\x38\x2f\x6b\x37\x57\x42\x70\x49\x6e\x45\x63\x6a\x77\x67\x42\x67\x72\x59\x4f\x37\x50\x74\x6b\x42\x2f\x75\x68\x6d\x64\x65\x4e\x52\x34\x2f\x66\x62\x4d\x69\x48\x51\x62\x63\x78\x6d\x30\x79\x56\x4a\x4d\x51\x49\x4d\x73\x74\x77\x35\x6c\x4a\x5a\x65\x46\x44\x33\x41\x52\x30\x76\x5a\x2b\x57\x74\x33\x7a\x39\x67\x73\x52\x36\x61\x39\x65\x39\x6f\x6c\x4a\x79\x7a\x6b\x46\x61\x6b\x52\x62\x61\x48\x56\x63\x42\x50\x2f\x34\x56\x5a\x64\x74\x32\x63\x44\x63\x2f\x31\x75\x55\x69\x78\x6e\x2f\x70\x66\x34\x54\x42\x69\x6c\x5a\x63\x47\x4f\x52\x43\x49\x45\x49\x69\x4f\x41\x69\x62\x2b\x59\x54\x34\x64\x43\x63\x7a\x42\x56\x6a\x64\x4c\x37\x43\x34\x59\x79\x68\x72\x50\x37\x53\x45\x6d\x56\x77\x4a\x6b\x57\x74\x75\x67\x45\x6c\x42\x6f\x68\x2b\x49\x32\x2b\x68\x4e\x2f\x61\x4b\x6f\x2f\x78\x41\x62\x6c\x54\x6d\x2f\x30\x33\x73\x45\x48\x75\x6d\x2b\x78\x6f\x30\x68\x76\x64\x41\x34\x46\x4d\x52\x4b\x43\x55\x58\x47\x62\x70\x6e\x48\x71\x64\x54\x57\x55\x50\x78\x59\x52\x74\x6b\x74\x38\x68\x45\x30\x5a\x37\x55\x49\x4c\x57\x4a\x4a\x42\x63\x78\x50\x75\x67\x6a\x4f\x76\x76\x72\x36\x5a\x72\x62\x37\x64\x58\x46\x50\x70\x65\x79\x4b\x52\x36\x68\x35\x4e\x4f\x56\x5a\x59\x32\x48\x77\x49\x44\x41\x51\x41\x42'
    }
  },
  computed: {
    phoneLoginDisabled() {
      let flag = this.validatePhone(2)
      return this.isObject(flag) || !this.agreeCheck
    },
    inBro() {
      return this.isBrowser()
    },
    isClient() {
      return true
    }
  },
  methods: {
    // 控制登陆方式切换
    handleTypeChange() {
      this.isShowEwmOverlay = false
      this.isShowUplodaTitle = false
      this.clearPoll()
      this.init()
    },
    // 获取二维码
    async getEwm() {
      this.isEwmLoading = true
      let timestamp = new Date().valueOf()
      let params = {
        timestamp,
        from: 'web',
        channel: 'web',
        devtype: 'web',
        platform: 'web'
      }
      try {
        let res = {}
        if (+this.loginType === 1) {
          //微信登录
          if (this.path) params.url = btoa(this.path)
          res = await getWxEwm(params)
        } else if (+this.loginType === 3) {
          //app登录
          res = await getAppEwm(params)
        }
        let {
          data: { imgsrc = '', token = '' },
          errcode,
          errmsg
        } = res
        if (+errcode !== 0)
          return this.$message({ type: 'warning', message: errmsg })
        this.isEwmLoading = false
        this.ewmImg = imgsrc
        this.ewmToken = token
      } catch (err) {
        // 网络错误
        this.$message({ type: 'warning', message: err })
      }
    },
    // 轮询二维码状态：
    pollEwmStatus() {
      let params = {
        from: 'web',
        channel: 'web',
        devtype: 'web',
        platform: 'web',
        token: this.ewmToken,
        timestamp: new Date().valueOf()
      }
      this.clearPoll()
      try {
        // 1秒钟轮询一次
        this.pollTimer = setTimeout(async () => {
          let res = {}
          if (+this.loginType === 1) {
            res = await getWxEwmStatus(params)
          } else if (+this.loginType === 3) {
            res = await getAppEwmStatus(params)
          }
          let {
            data: { status }
          } = res
          // 枚举二维码状态；
          this.checkStatus(status)
        }, 2000)
      } catch (err) {}
    },
    // 显示登录蒙层
    showOverlay() {
      this.isShowEwmOverlay = true
    },

    showSmSuc() {
      this.showOverlay()
      this.isShowSmSuccessTitle = true
    },
    // 清除轮询定时器
    clearPoll() {
      clearTimeout(this.pollTimer)
      this.pollTimer = null
    },
    // 获取用户信息
    // async getUserInfo(){
    //   let params = {
    //     timestamp:new Date().valueOf()
    //   }
    //   try{
    //     let {errcode,errmsg,data} = await getUserInfo(params)
    //     if(+errcode !== 0) {   //获取用户失败，重新登录
    //       this.$message({type:'warning',message:errmsg})
    //       this.showUpdataEwm()
    //       return
    //     }
    //     storage.set('user',JSON.stringify(data))
    //   }catch(err){
    //     this.$message({type:'warning',message:'网络错误，请刷新重试！'})
    //   }
    // },
    // 跳转到指定页面
    goToPage() {
      // 如果有规定登陆成功后的跳转路劲，则跳到指定路径，没有则跳到首页
      // let lastUrl = storage.get('lastUrl')?storage.get('lastUrl'):'/'
      // this.goTo(lastUrl,{replace:true})
      // 登录成功之后的操作，将抛出loginSuccess事件；
      this.$emit('loginSuccess')
    },
    // 显示刷新二维码提示
    showUpdataEwm() {
      this.showOverlay()
      this.isShowUplodaTitle = true
    },
    // 二维码枚举
    // 1:继续轮询，
    // 2：已扫码 显示蒙层状态；
    // 3：已登录，
    // 4：失效显示刷新二维码；
    // 5：取消授权，显示刷新
    checkStatus(val) {
      // val 为int型，所以使用map
      let enumMap = new Map()
      enumMap
        .set(1, () => {
          this.pollEwmStatus()
        })
        .set(2, () => {
          this.showSmSuc()
          this.pollEwmStatus()
        })
        .set(3, async () => {
          this.$message({ type: 'success', message: '登录成功' })
          this.clearPoll()
          this.goToPage()
        })
        .set(4, () => {
          this.$message({
            type: 'warning',
            message: '二维码已失效请刷新重试！'
          })
          this.showUpdataEwm()
          this.clearPoll()
        })
        .set(5, () => {
          this.$message({ type: 'warning', message: '已取消授权' })
          this.clearPoll()
        })
      if (!enumMap.has(val)) return
      enumMap.get(val)()
    },
    // 获取图形验证码
    async getPicCode() {
      // 防抖
      if (this.getPicCodeFlag) return
      let params = {
        timestamp: new Date().valueOf()
      }
      try {
        if (this.path) params.url = btoa(this.path)
        this.getPicCodeFlag = true
        let {
          errcode,
          errmsg,
          data: { auth_token, image }
        } = await getPicCode(params)
        this.getPicCodeFlag = false
        if (errcode !== 0) {
          this.$message({ type: 'warning', message: errmsg })
        }
        this.auth_token = auth_token
        this.picCodeImg = image
      } catch (err) {
        this.getPicCodeFlag = false
        this.$message({ type: 'warning', message: '网络错误，请刷新重试！' })
      }
    },
    // 手机号登录校验 type:1 不校验验证码 2：校验验证码
    validatePhone(type) {
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        return {
          type: 'warning',
          message: '手机号码有误，请重新输入'
        }
      }
      if (!this.picCode) {
        return {
          type: 'warning',
          message: '请输入图片验证码'
        }
      }
      if (+type === 1) return true
      if (!/(^[a-z0-9]{4}$)|(^[a-z0-9]{6}$)/.test(this.vcode)) {
        return { type: 'warning', message: '验证码格式错误' }
      }
      if (!this.agreeCheck) {
        return { type: 'warning', message: '请先同意协议' }
      }
      return true
    },
    // 发送手机验证码
    async postPhoneCode() {
      if (this.smCodeTimer) return
      // 校验输入
      let flag = this.validatePhone(1)
      if (this.isObject(flag)) {
        return this.$message(flag)
      }
      // 手机号进行两侧base64加密
      let phone = btoa(btoa(this.phone))
      let verification_code = this.picCode
      let timestamp = window['\x44\x61\x74\x65']['\x6e\x6f\x77']()
      let encrypt = new JSEncrypt()
      encrypt['\x73\x65\x74\x50\x75\x62\x6c\x69\x63\x4b\x65\x79'](
        '\x2d\x2d\x2d\x2d\x2d\x42\x45\x47\x49\x4e \x50\x55\x42\x4c\x49\x43 \x4b\x45\x59\x2d\x2d\x2d\x2d\x2d' +
          this['\x50\x55\x42\x4c\x49\x43\x5f\x4b\x45\x59'] +
          '\x2d\x2d\x2d\x2d\x2d\x45\x4e\x44 \x50\x55\x42\x4c\x49\x43 \x4b\x45\x59\x2d\x2d\x2d\x2d\x2d'
      )
      let str = {
        auth_token: this['\x61\x75\x74\x68\x5f\x74\x6f\x6b\x65\x6e'],
        telphone: phone,
        verification_code,
        timestamp
      }
      let encrypted = encrypt['\x65\x6e\x63\x72\x79\x70\x74'](
        JSON['\x73\x74\x72\x69\x6e\x67\x69\x66\x79'](str)
      )
      let params = {
        sign: encrypted,
        timestamp
      }
      this.smCodeTimer = setInterval(() => {
        this.codeCount--
        this.codeMsg = `${this.codeCount}后重新获取`
        if (this.codeCount === 0) {
          this.codeCount = 60
          this.codeMsg = '重新发送'
          clearInterval(this.smCodeTimer)
          this.smCodeTimer = null
        }
      }, 1000)
      let { errcode, errmsg } = await postPhoneCode(params)
      if (errcode !== 0) {
        this.$message({ type: 'warning', message: errmsg })
        return
      }
      this.$message({ type: 'success', message: '验证码已发送，请注意查收！' })
    },
    // 手机号确认登录
    async submitPhone() {
      // 校验输入
      let flag = this.validatePhone(2)
      if (this.isObject(flag)) {
        return this.$message(flag)
      }
      // 手机号进行两侧base64加密
      let phone = btoa(btoa(this.phone))
      let params = {
        t: Date.now(),
        v_date: '',
        timestamp: Date.now(),
        telphone: phone,
        code: this.vcode,
        channel: 'web_mobile',
        platform_type: 'web',
        devtype: 'web',
        from: 'web'
      }
      let { errcode, errmsg } = await submitPhone(params)
      if (errcode !== 0) {
        this.$message({ type: 'warning', message: errmsg })
        return
      }
      // await this.getUserInfo()
      // this.goToPage()
      this.$emit('loginSuccess')
    },
    // 初始化
    async init() {
      // 手机号登录
      if (+this.loginType === 2) {
        // this.getPicCode()
        return
      }
      // 二维码登录
      await this.getEwm()
      this.pollEwmStatus()
    },
    // 关闭二维码弹窗
    closeLoginDialog() {
      this.clearPoll()
      sessionStorage.removeItem('lastUrl')
      this.$emit('closeLogin', true)
    }
  },
  beforeMount() {
    entryStore.loadModule(this.$store, ['user'])
  },
  mounted() {
    this.$store.commit('user/setIsShowGift', false)
    this.dynamicLoadJs(
      '//image.zlketang.com/public/news/js/jsencrypt.min.js',
      'jsencryptMin'
    )
    this.storage.init()
    this.init()
    // 之拿一次图形验证码  后续切换登录方式，手动点击图形验证码调用
    this.getPicCode()
  },
  destroyed() {
    if (this.smCodeTimer) {
      clearInterval(this.smCodeTimer)
      this.smCodeTimer = null
    }
  }
}
</script>

<style>
.login-nav .el-tabs__item {
  padding: 0 18px 10px 18px;
  font-size: 18px;
  font-weight: 400;
  color: #666666;
  line-height: 25px;
}

.login-nav .is-active {
  /* css-ignore */
  font-weight: bold;
  color: #383838;
}
.login-nav .el-input {
  margin-top: 20px;
}
.login-box-pop .el-input {
  margin-top: 15px;
}
.login-nav .el-input:first-of-type {
  margin-top: 0;
}
.login-nav .el-input__inner {
  color: #383838;
  background: #f7f7f7;
  border: none;
}
.login-nav .el-input__inner::-webkit-input-placeholder {
  color: #999999;
}

.login-nav .el-input__inner::-moz-placeholder {
  color: #999999;
}

.login-nav .el-input__inner:-ms-input-placeholder {
  color: #999999;
}

.login-nav .el-input__inner::-webkit-input-placeholder {
  color: #999999;
}

.login-nav .el-input__inner::placeholder {
  color: #999999;
}

.login-nav .el-radio {
  display: flex;
}

.login-nav .el-radio__label {
  white-space: normal;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}

.login-nav .el-radio__label a {
  color: #3480ff;
}

.login-nav .el-input-group__append {
  border: none;
}

.login-nav .el-radio__input.is-checked + .el-radio__label {
  color: #999999;
}

.login-nav .el-tabs__nav-wrap.is-scrollable {
  padding: 0;
}

.login-nav .el-tabs__nav-next,
.login-nav .el-tabs__nav-prev {
  display: none;
}
</style>

<style scoped>
.login-box {
  width: 370px;
  height: 460px;
  padding: 40px 30px;
  background: #ffffff;
  border-radius: 12px;
}

.login-box-pop {
  padding: 0px;
  width: 1040px;
  height: 557px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

.login-dialog-left {
  width: 520px;
  height: 557px;
}

.login-nav {
  width: 100%;
}

.login-box-pop .login-nav {
  padding: 36px 30px 0;
}

.login-content-box {
  margin-top: 30px;
}

.login-content-box-app {
  margin-top: 10px;
}
.login-box-pop .login-content-box,
.login-box-pop .login-content-box-app {
  margin: 50px 75px 0;
}
.exm-img {
  width: 200px;
  height: 200px;
}

.hold-img {
  /* display: block;
  width: 60px;
  margin: 0 auto;
  margin-top: 50px; */
}

.exm-img-app {
  width: 200px;
  height: 200px;
}

.login-tips {
  margin-top: 8px;
  font-size: 16px;
  font-weight: 400;
  color: #999999;
  line-height: 22px;
}
.agree-box {
  margin-top: 36px;
  font-size: 12px;
  font-weight: 400;
  color: #999999;
  line-height: 17px;
}

.agree-box-pop {
  margin-top: 10px;
}

.agree-box a {
  text-decoration: none;
  color: #3480ff;
}

.login-btn {
  cursor: pointer;
  text-align: center;
  line-height: 40px;
  background: #3480ff;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
}

.login-btn-disable {
  background: #d6ebff;
}

.login-nav .login-btn {
  margin-top: 50px;
}
.login-box-pop .login-nav .login-btn {
  margin-top: 40px;
}
.pic-img {
  cursor: pointer;
  width: 61px;
  height: 24px;
}

.sm-append {
  cursor: pointer;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 27px;
  background: transparent;
  border-radius: 4px;
  color: #999999;
  border: 1px solid #999999;
}

.sm-append-def {
  color: #3480ff;
  border: 1px solid #3480ff;
}

.ewm-img-box {
  position: relative;
}

.ewm-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(127, 127, 127, 0.9);
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  line-height: 25px;
}

/* 登录弹窗样式 */
.login-title-box {
  /* width: 310px; */
  font-size: 20px;
  font-weight: bold;
  color: #383838;
  line-height: 28px;
  text-align: center;
}

.login-close-icon {
  cursor: pointer;
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 20px;
  font-weight: bold;
  color: #d9d9d9;
}

.login-dialog-line {
  width: 170px;
  height: 1px;
  background: #f2f2f2;
}

.login-dialog-other {
  font-size: 14px;
  color: #d9d9d9;
  line-height: 20px;
}

.login-dialog-bottom {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 40px;
}

.login-dialog-item {
  width: 140px;
  height: 46px;
  border-radius: 4px;
  border: 1px solid #f2f2f2;
  cursor: pointer;
}

.login-dialog-item div {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 400;
  color: #383838;
  line-height: 22px;
}

.login-dialog-item img {
  width: 26px;
  height: 26px;
}

/deep/.login-nav .el-tabs__nav-wrap::after {
  height: 1px;
  background: #f2f2f2;
}

/deep/.agree-box .el-radio__input.is-checked .el-radio__inner {
  background: #3480ff;
}
/deep/.agree-box .el-radio__inner {
  margin-top: 2px;
}
/deep/ .login-content-box .el-input-group__append {
  padding-right: 10px;
}
</style>
